<template>
  <div class="page">
    <div class="bg-rotated"></div>
    <div class="center-bg"><!-- future overlays go here --></div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.page {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-rotated {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vh; /* swap to cover after rotation */
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  background: url('http://117.72.17.45:5500/data/icons/backInback.jpg') center/100% 100% no-repeat;
  z-index: 0;
}
.center-bg {
  width: 60%;
  height: 60%;
  background: url('http://117.72.17.45:5500/data/icons/table.png') center/contain no-repeat;
  position: relative; /* allow overlays */
  z-index: 1;
}
</style>


